﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet"
          data-name="vs/editor/editor.main"
          href="vs/editor/editor.main.css" />
</head>
<body>
    <h2>Monaco Editor Sync Loading Sample</h2>

    <fieldset>
        <legend>code information</legend>
        <select id="selType">
            <option value="d11e08bf9da111eaa242b06ebfba413f">SqlCmd</option>
            <option value="a2acc14f0c0b4b438333e3eec01634ce">RazorTemplate</option>
        </select>
        <label for="txtId">ID</label><input type="text" id="txtId" />
        <input type="button" value="获取代码" id="btnSearch" />
        <input type="button" value="保存代码" id="btnSave" />
        <br />
        <label for="txtVer">Version</label><input type="text" id="txtVer" />
        <select id="selExecType">
            <option value="1">Execute</option>
            <option value="2">QueryFirstOrDefault</option>
            <option value="3">Query</option>
        </select>
        <select id="selIsEnabled">
            <option value="true">启用</option>
            <option value="false">禁用</option>
        </select>
    </fieldset>
    <label for="themePicker">Theme</label>
    <select id="themePicker">
        <option></option>
        <option value="vs">Visual Studio</option>
        <option value="vs-dark">Visual Studio Dark</option>
        <option value="hc-black">High Contrast Dark</option>
    </select>
    <label for="languagePicker">Language</label>
    <select id="languagePicker">
    </select>
    <div id="container" style="width: 100%; height: 800px; border: 1px solid grey"></div>

    <script>
        var require = { paths: { vs: 'vs' } };
    </script>
    <script src="vs/loader.js"></script>
    <script src="vs/editor/editor.main.nls.js"></script>
    <script src="vs/editor/editor.main.js"></script>
    <script src="../swagger/js/jquery.js"></script>

    <script>
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
            language: 'javascript',
            theme: 'vs-dark'
        });

        var MODES = (function () {
            var modesIds = monaco.languages.getLanguages().map(function (lang) {
                return lang.id;
            });
            modesIds.sort();

            return modesIds.map(function (modeId) {
                return {
                    modeId: modeId,
                    //sampleURL: 'index/samples/sample.' + modeId + '.txt'
                };
            });
        })();

        for (var i = 0; i < MODES.length; i++) {
            var o = document.createElement('option');
            o.textContent = MODES[i].modeId;
            //if (MODES[i].modeId === 'typescript') {
            //    startModeIndex = i;
            //}
            $('#languagePicker').append(o);
        }

        $('#languagePicker').change(function () {
            var oldModel = editor.getModel();
            var newModel = monaco.editor.createModel(editor.getValue(), MODES[this.selectedIndex].modeId);
            editor.setModel(newModel);
            if (oldModel) {
                oldModel.dispose();
            }

        });

        $("#btnSearch").click(function () {
            var para = {
                "optType": "1",
                "kcoId": $('#selType').val(),
                "coEnt": {
                    "id": $('#txtId').val(),
                    "code": "",
                    "extra": {
                        "version": $('#txtVer').val(),
                        "execType": $('#selExecType').val(),
                        "isEnabled": $('#selIsEnabled').val()
                    }
                }
            };

            var settings = {
                "url": "/api/v1/Core/General/code",
                "method": "POST",
                "headers": {
                    "accept": "*/*",
                    "Content-Type": "application/json"
                },
                "data": JSON.stringify(para),
            };

            $.ajax(settings).done(function (response) {
                //切换代码和语言
                var oldModel = editor.getModel();
                var newModel = monaco.editor.createModel(response.data.code, response.data.language);
                editor.setModel(newModel);
                if (oldModel) {
                    oldModel.dispose();
                }
            }).fail(function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseJSON.data[0].message);
            });
        });

        $("#btnSave").click(function () {
            var para = {
                "optType": "2",
                "kcoId": $('#selType').val(),
                "coEnt": {
                    "id": $('#txtId').val(),
                    "code": editor.getValue(),
                    "extra": {
                        "version": $('#txtVer').val(),
                        "execType": $('#selExecType').val(),
                        "isEnabled": $('#selIsEnabled').val()
                    }
                }
            };

            var settings = {
                "url": "/api/v1/Core/General/code",
                "method": "POST",
                "headers": {
                    "accept": "*/*",
                    "Content-Type": "application/json"
                },
                "data": JSON.stringify(para),
            };

            $.ajax(settings).done(function (response) {
                alert("保存成功！");
            }).fail(function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseJSON.data[0].message);
            });
        });

        //切换主题
        $('#themePicker').change(function () {
            var theme = $('#themePicker').val();
            if (theme) {
                monaco.editor.setTheme(theme);
            }
        });

    </script>
</body>
</html>
